<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<title>Document</title>
		<!-- 地圖 -->
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: '3cc5832b99508ad2b48a63c177a00df2',
			}
		</script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<!-- vue -->
		<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="container"></div>
		</div>
	</body>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

	<script type="module">
		new Vue({
			el: '#app',
			data() {
				return {
					map: '',
					currentLat: '',
					currentLng: '',
					stationData: [],

					pathList: {},
				}
			},
			mounted() {
				this.init();
			},
			watch: {
				pathList: {
					handler(val) {
						if (val) {
							this.init();
						}
					},
					deep: true,
					immediate: true,
				}
			},
			methods: {
				//创建地图，并遍历maker数组创建maker标点
				init() {
					console.log('src传递需要的参数', window.location.search);
					this.pathList = new URLSearchParams(window.location.search);
					console.log(this.pathList);
					await AMapLoader.load({
						key: "1accf3142acd239c3a192bd6d31d4ec6", // 申请好的Web端开发者Key，首次调用 load 时必填
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
					})
					.then((AMap) => {
					  this.map = new AMap.Map('container', {
						WebGLParams: {
						  preserveDrawingBuffer: true
						},
						// 设置地图容器id
						viewMode: "3D", //  是否为3D地图模式
						zoom: 14, // 初始化地图级别
						center: [116.397, 39.918],
						// this.pathList && this.pathList.origin
						//   ? [this.pathList.origin]
						//   : [116.397, 39.918], //中心点坐标
						resizeEnable: true,
					  });
					  this.echart();
					})
					.catch((e) => {
					  console.log(e);
					});
				},
				//创建路线规划
				echart() {
					// console.log("接收参数origin", this.pathList.origin,'接收参数destination',this.pathList.destination);
					let that = this
					// 起点
					let origin = this.pathList.origin.split(',').map(item => Number(item))
					const originMarker = new AMap.Marker({
						position: origin,
						icon: 'https://a.amap.com/jsapi/static/image/plugin/marker/start.png', // 添加 Icon 图标 URL
						title: this.pathList.originName,
						offset: new AMap.Pixel(-12.5, -30),
					});
					this.map.add(originMarker);
					// 终点
					let destination = this.pathList.destination.split(',').map(item => Number(item))
					const destinationMarker = new AMap.Marker({
						position: destination,
						icon: '	https://a.amap.com/jsapi/static/image/plugin/marker/end.png', // 添加 Icon 图标 URL
						title: this.pathList.destinationName,
						offset: new AMap.Pixel(-12.5, -30),
					});
					this.map.add(destinationMarker);
					let waypoints = []
					if (this.pathList.waypoints) {
						waypoints = this.pathList.waypoints.split(';')
						let waypointsName = this.pathList.waypointsName.split(';')
						waypoints = waypoints.filter(item => !!item)
						waypoints = waypoints.map((item, index) => {
							let arr = item.split(',').map(i => Number(i))
							// 创建自定义标记
							const marker = new AMap.Marker({
								position: arr,
								icon: 'https://a.amap.com/jsapi/static/image/plugin/marker/mid.png', // 添加 Icon 图标 URL
								title: `目的地${index + 1}${waypointsName[index]}`,
								offset: new AMap.Pixel(-12.5, -30),
							});

							// 添加标记到地图
							this.map.add(marker);
							return arr
						})
					}
					AMap.plugin(
						["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker"],
						function() {
							//异步同时加载多个插件
							var toolbar = new AMap.ToolBar();
							that.map.addControl(toolbar);
							var driving = new AMap.Driving({
								map: that.map,
								hideMarkers: true
							}); //驾车路线规划

							var startLngLat = [origin[0], origin[1]]
							var endLngLat = [destination[0], destination[1]]
							driving.search(startLngLat, endLngLat, {
									waypoints
								},
								function(status, result) {
									// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
									if (status === "complete") {} else {
										// console.log("获取驾车数据失败：" + result);
									}
								}
							);
						}
					);
				},

			}
		})
	</script>

	<style scoped>
		* {
			margin: 0;
		}
		#container {
			width: 100%;
			height: 200px
		}

		/* #panel {
			position: fixed;
			background-color: white;
			max-height: 90%;
			overflow-y: auto;
			top: 10px;
			right: 10px;
			width: 280px;
		}

		#panel .amap-call {
			background-color: #009cf9;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
		}

		#panel .amap-lib-driving {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			overflow: hidden;
		}
		.custom-content-marker-current {
			position: relative;
			width: 25px;
			height: 34px;
			overflow: hidden;
		}

		.custom-content-marker {
			position: relative;
			width: 40px;
			height: 40px;
			overflow: hidden;
		}

		.custom-content-marker-current img,
		.custom-content-marker img {
			width: 100%;
			height: 100%;
		} */

		/* maker样式 */
	</style>
</html>